<style scoped lang="less">
@height: 18px;
.paging {
  width: 100%;
  height: @height;
  display: flex;
  flex-flow: row nowrap;

  &__item{
    border: 1px solid rgba(153, 153, 153, 0.15);
    transition: all ease-in-out .3s;
    &:hover:not(&-active){ cursor: pointer; background: rgba(20, 27, 39, 0.14)}
    height: 100%;
    margin-right: 10px;
    background: rgba(0, 0, 0, 0.02);
    min-width: @height;
    border-radius: 4px;
    padding: 4px;
    &-active { background: v-bind(activeBgColorCom);}
    &-active > &__text { color: v-bind(activeTextColorCom) }
    &-disabled{
      background: #eaeaea;
      &:hover{ cursor: default }
    }
    &-disabled > &__text { color: #bbbbbb !important; }
    &__text{
      font-weight: 500;
      transition: all ease-in-out .3s;
      line-height: @height;
      font-size: 12px;
      color: #999;
      text-align: center;
    }
  }
}
</style>
<template>
  <div class="paging" v-if="!hideComponent">
    <template  v-for="(item ,index) of buttonListTemplate">
      <div @click="handleClickCurrent(item.value)" class="paging__item" v-if="item.template === 'default'" :class="{'paging__item-active': props.pageNum === item.value}">
        <div class="paging__item__text" >{{ item.value }}</div>
      </div>
      <div class="paging__item paging__item-disabled" v-if="item.template === 'el'">
        <div class="paging__item__text">···</div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";

const props = defineProps({
  pageNum:{ type:[Number,String], default: 1 },  // 页码 用于计算
  pageSize:{ type:[Number,String], default: 0 },// 分页数 用于计算
  total:{ type:[Number,String], default: 0 }, // 总数 用于计算

  activeBgColor: { type:String, default :'red' },
  activeTextColor: { type:String, default :'white' },
  showCount: { type:[Number,String], default: 7 }, // 展示数量
  hideOnSinglePage: { type:Boolean, default: true }, // 只有一页隐藏
})
const emit = defineEmits(['update:pageNum'])
const dynamicMidButton = computed(() => props.showCount ?? 7) // 实际展示数字页码数量
const cursorNum = computed(() => Math.ceil((dynamicMidButton.value - 3) / 2)) // 游标数量
const pageButtonCom = computed(() => props.total <= props.pageSize ? 0 : Math.ceil((props.total ?? 0) / (props.pageSize ?? 1))) // 实际可分页数量
const hideComponent = computed(() => props.hideOnSinglePage && pageButtonCom.value <= 1) // 隐藏组件
const activeBgColorCom = computed(() => props.activeBgColor ?? 'red')
const activeTextColorCom = computed(() => props.activeTextColor ?? 'white')
const buttonListTemplate = computed(() => // 动态生成模板
    ([
      { template: 'default',value:'<' }, // 左箭头
      { template: 'default',value: 1 }, // 数字1
        ...new Array(Math.min(dynamicMidButton.value,pageButtonCom.value))
            .fill(null)
            .map((ele:any,index: number,arr:any[]) => {
              const value = index - cursorNum.value + props.pageNum -1
              return {
                template: ( value <= 1 || value >=  pageButtonCom.value ) ? 'hidden' :
                    (index === 0 || index === arr.length - 1) ? 'el' : 'default',
                value
              }
            }),
      { template: pageButtonCom.value <= 1 ? 'none' : 'default',value: pageButtonCom.value }, // 数字倒数
      { template:'default',value:'>' }, // 右箭头
    ])
)

//  交互
const handleClickCurrent = (event:number) => {
  if(String(event) === String(props.pageNum)) return
  const isLeft = String(event) === '<'
  const isRight = String(event) === '>'
  let value = event
  if(isLeft){
    if(props.pageNum === 1) return
    else value = props.pageNum - 1
  }
  if(isRight){
    if(props.pageNum === pageButtonCom.value) return
    else value = props.pageNum + 1
  }
  emit('update:pageNum',value)

}
</script>

